---
name: Usage in React
---

# Usage in React

Genql methods are just functions that return promises, to use genql in a react application you need a query manager like `swr` or `react-query`

## Example with swr

```jsx
import React, { useState } from 'react'
import useSWR from 'swr'
import { createClient, everything } from './generated'
const client = createClient()

const Page = () => {
    const [filter, setFilter] = useState('.*')
    // IMPORTANT: you must declare the fetcher function separately or typescript completion will not work, it looks like that typescript has a a bug
    const fetcher = (filter) =>
        client.query({
            countries: [
                { filter: { continent: { regex: filter } } },
                { name: 1, code: 1, languages: { ...everything } },
            ],
        })
    const { data, error } = useSWR([filter], fetcher)
    return <div>{JSON.stringify(data)}</div>
}
```

> you must declare the swr fetcher function separately or typescript completion will not work, it looks like typescript has a a bug

## Example with react-query

```jsx
import React, { useState } from 'react'
import { useQuery } from 'react-query'
import { createClient, everything } from './generated'
const client = createClient()

const Page = () => {
    const [regex, setRegex] = useState('.*')
    // IMPORTANT: you must declare the fetcher function separately or typescript completion will not work, it looks like that typescript has a a bug
    const fetcher = (_, regex) =>
        client.query({
            countries: [
                { filter: { continent: { regex: regex } } },
                { name: 1, code: 1 },
            ],
        })
    const { data, error } = useQuery(['countries-key', regex], fetcher)
    return <div>{JSON.stringify(data)}</div>
}
```

> you must declare the react-query fetcher function separately or typescript completion will not work, it looks like typescript has a a bug
